<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>理解宏任务与微任务</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>理解宏任务与微任务</h1>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
 	<script type="text/javascript">
		setTimeout(() => {
			console.log('setTimeout 宏任务')
			
		})

		console.log('-----------new Promise 之前------------\n')
		
		new Promise(resolve => {
			console.log('------------Promise 之中 inner1 -----------\n')
			
			resolve('resolve之后将promise的处理(then回调)放到微任务队列中');
			console.log('------------Promise 之中 inner2 -----------\n')

		}).then(value=> {
			console.log('value1 = ' + value)
			return '1111'
		})
		.then(value=> {
			setTimeout(() => {
				console.log('value2 = ' + value)
			})
			return '22222'
		})
		.then(value=> {
			console.log('value3 = ' + value)
		})

		// 对promise的处理(then回调)任务都放在微任务队列之中了
		// 微任务队列的执行优先级 高于 宏任务

		// macro - task(宏任务):包括整体script代码,setTimeout,setInterval
		// micro - task(微任务):promise,process.nextTick
		// 
		console.log('主线程结束')
		// 主线程执行完毕， 去微任务队列中 依次出队列 微任务。 直到清空
		// 下一轮循环里 先执行宏任务的队列， 直到清空
		
	</script>
</body>
</html>